<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .myimg {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            display: block;
            margin-left: 300px;
        }

        @keyframes moveOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        .move-out {
            animation: moveOut 3s 0s linear both;
        }

        @keyframes move-inright {
            0% {
                transform: translateX(300px) scale(0);
                opacity: 0;
            }

            100% {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
        }

        .move {
            animation: move-inright 3s both;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: scale(0);
        }

        .v-leave,
        .v-enter-to {
            opacity: 1;
            transform: scale(1);
        }

        .myimg {
            transition: all 1s;
        }

        @keyframes min {
            0% {
                opacity: 0;
                transform: scale(0) rotate(0);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(360deg);
            }
        }

        .v-enter-active {
            animation: min 2s both;
        }

        @keyframes mout {
            0% {
                opacity: 1;
                transform: scale(1) rotate(360deg);
            }

            100% {
                opacity: 0;
                transform: scale(0) rotate(0);
            }
        }

        .v-leave-active {
            animation: mout 2s both;
        }

        @keyframes fadeIn {
            from {
                transform: scale(0) translateY(-200px);
                opacity: 0;
            }

            to {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            0% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }

            100% {
                transform: scale(0) translateY(200px);
                opacity: 0;
            }
        }

        .fade-enter-active {
            animation: fadeIn 1.4s both;
        }

        .fade-leave-active {
            animation: fadeOut 1.4s both;
        }

        .zoom-enter-active {
            animation: zoomInUp 1.4s both;
        }

        .zoom-leave-active {
            animation: zoomOutUp 1.4s both;
        }

        .slide-enter-active {
            animation: backInRight 1.4s;
        }

        .slide-leave-active {
            animation: backOutRight 1.2s;
        }

        .appear-slide {
            animation: tada 1.5s;
        }
    </style>

</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- <img src="../1.jpg" alt="" class="myimg move-out">
        <img src="../2.jpg" alt="" class="myimg move"> -->
        <!-- <div>
            <transition>
                <img v-show="show" src="../1.jpg" alt="" class="myimg">
            </transition>
            <button @click="show=!show">点击切换</button>

        </div>
        <div>
            <transition name="fade">
                <img v-show="show1" src="../2.jpg" alt="" class="myimg">
            </transition>
            <button @click="show1=!show1">点击切换1</button>
        </div> -->
        <div>
            <transition name="zoom">
                <img v-show="show2" src="../1.jpg" alt="" class="myimg">
            </transition>
            <button @click="show2=!show2">点击切换1</button>
        </div>
        <div>
            <transition name="slide" name="slide" appear appear-active-class="appear-slide">
                <img v-show="show3" src="../2.jpg" alt="" class="myimg">
            </transition>
            <button @click="show3=!show3">点击切换1</button>
        </div>

    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: "Vue 添加动画 - transition",
            show: true,
            show1: true,
            show2: true,
            show3: true
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!-- 

    route  页面切换  进入和离开的动画

    Vue 提供了transition的封装组件  任何元素和组件添加进入/离开过度
    v-if
    v-show
    组件切换 （动态组件切换  子组件切换）
    

    过度（0-1）
    在进入/离开的过度中，会有6个class切换
    v-enter 进入之前    开始帧 过度
    v-enter-active 正式进入 animation
    v-enter-to  进入完成    结束帧

    v-leave 离开之前
    v-leave-active  正在离开
    v-leave-to  离开完成

    v-  transition  没有name 默认 v-
    transition添加 name = fade v 替换成fade

    初始化渲染 过度
    appear
    appear-active-class 动画

    v-if  / v-show

 -->

</html>